<!DOCTYPE html>
<html lang="en">
<head>
    <title>LBC作业五</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="zy5css/zy5.css">
    <link rel="shortcot icon" href="images/05.ico">
</head>    
    <body>
        <div class="bottom">
            <div class="head">
                <div class="head-top"></div>
                <div class="head-ico">
                    <div class="head-ico-left"><img src="images/top.png" alt=""></div>
                    <div class="head-ico-right"><span>MINIMAL</span></div>
                </div>
                <div class="head-sub"></div>
            </div>
<!-- 第一块文字 -->
                <div class="main">
                    <div class="main-left">
                        <!-- 左字 186-->
                        <div class="main-left-word1">
                            <span style="color: #ff7272;">11/09/2015&nbsp;&nbsp;</span>
                            <span><sup>.</sup>&nbsp;&nbsp;LIFESTYLE</span>
                        </div>
                        <div style="height: 59px;"></div>
                        <div class="main-left-word2">
                            <pre>
BUILD A GRADEN IN
YOUR SMELL APARTME
                            </pre>
                        </div>
                        <div class="main-left-word3">
                            <pre>
Lorem ipsum dolor sit amet, conseqtetuer adipiscing
elit, sed diam nbnummy nibh euismod tincidunt ut
laoreet dolore magra aliquam erat volutpat. Ut wisi
lenim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputatevelitlesse molestie
consequat, vel illum dolore eu lfeugjat nulla facilisis
lat vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzriÍ delenit augue duis
dolore te feugait nulla facilisi.
                            </pre>
                        </div>
                        <div class="main-left-word4">
                            <a><i>READ MORE...</i></a>
                        </div>
                        <div class="main-left-word4-line"></div>
                        
                    </div>
                    <div class="main-right">
                        <!-- 右图 -->
                        <img src="images/m-1.png" alt="">
                    </div>                   
                </div>
            <div class="main-line"></div>
            <div class="main-freedom"></div>

            <div class="main">
                <div class="main-left">
                    <!-- 左字 12h-->
                    <div class="main-left-word1">
                        <span style="color: #ff7272;">11/08/2015&nbsp;&nbsp;</span>
                        <span><sup>.</sup>&nbsp;&nbsp;TRAVEL</span>
                    </div>
                    <div style="height: 59px;"></div>
                    <div class="main-left-word2" style="height: 66px;"> 
                        <pre>
IN BLOOM
                        </pre>
                    </div>
                    <div class="main-left-word3" style="height: 420px;">
                        <pre>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna -aliquam erat volutpat. Ut wisi
eniml ad minim veniam, quis nostrud exerci tatio
nullmcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat, Duis autem vel eum iriure
dolor in hendrerit invulputate velit lesse molestie
consequat, vel illumdolore eu feugiat nulla façilisis
at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue dui
sdolore te feugait nulla facilisi. Nam liber tempor
cum soluta nobis eleifend option congue nihil lim-
perdiet domingid quod mazim placerat facer
possim assum. Typi non habent claritatem insitam;
est ulsus legentis in is qui facit eorum claritatem.
Investigationes demonstraverunt lelctores legere me
lius quod ii legunt saepius. Claritas est etiam pro-
cessus dynamiqus, qui sequitur mutationem con-
suetudium lectorum.                                                 
                        </pre>
                    </div>
                </div>
                <div class="main-right">
                    <!-- 右图 -->
                    <img src="images/m-2.png" alt="">
                </div>
            </div>
            <div class="main-line"></div>
            <!-- <div class="main-freedom"></div> -->
            <div class="main-freedom-two"></div>
<!-- 第三块文字 -->
        <div style="overflow: hidden;">
            <div class="main-left" style="height: 384px; width: 1232px;">
                <!-- 左字 12h-->
                <div class="main-left-word1">
                    <span style="color: #ff7272;">11/08/2015&nbsp;&nbsp;</span>
                    <span><sup>.</sup>&nbsp;&nbsp;LIFESTYLE</span>
                </div>
                <div style="height: 59px;"></div>
                <div class="main-left-word2" style="height: 66px;"> 
                    <pre>
MEMORIES OF MIDNIGHT
                    </pre>
                </div>
                <div class="main-left-word3" style="height: 240px;">
                    <pre>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magha aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquipl ex ea commodp consequat. Duis autem vel eum irjure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illumdolore eu feugiat nulla facilisisat vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolbre te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id
quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum clarịtatem. Investigationes demonstra-
verunt lectores legere me lius quod/ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
                    </pre>
                </div>
                
            </div>
        </div>    
            <!-- 第四块文字 -->

            <div class="main-line"></div>
            <div class="main-freedom"></div>
            <div class="main">
                <div class="main-left">
                    <!-- 左字 186-->
                    <div class="main-left-word1">
                        <span style="color: #ff7272;">11/09/2015&nbsp;&nbsp;</span>
                        <span><sup>.</sup>&nbsp;&nbsp;LIFESTYLE</span>
                    </div>
                    <div style="height: 59px;"></div>
                    <div class="main-left-word2">
                        <pre>
MY TRIP TO GREECE
                        </pre>
                    </div>
                    <div class="main-left-word3" style="height: 281px;">
                        <pre>
Lorem ipsum dolor sit amet, conseqtetuer adipiscing
elit, sed diam nbnummy nibh euismod tincidunt ut
laoreet dolore magra aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl utaliquip ex ea
commodo consequat. Duis autem vel eum iriure
dolor in hendrelrit in vulputate velitlesse molestie
consequat, vel illum dolore eu feugiat nulla façilisis
lat vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzriÍ delenit augue duis
dolore te feugait nulla facilisi.
                        </pre>
                    </div>
                    <div class="main-left-word4">
                        <a><i>READ MORE...</i></a>
                    </div>                  
                </div>
                <div class="main-right">
                    <!-- 右图 -->
                    <img src="images/m-3.png" alt="">
                </div>                   
            </div>

            <!-- 底部文字 -->
            <div class="main-line"></div>
            <div class="footer">
                <span>LOAD MORE ARTICLES</span>
            </div>
            <div class="main-line"></div>
            <div class="footer-right">
                <span>&copy;2015&nbsp;-ALL&nbsp;RIGHTS&nbsp;RESERVED</span>
            </div>


        </div>
    </body>
</html>